<!-- eslint-disable vue/valid-v-slot -->
<!-- eslint-disable vue/no-lone-template -->
<template>
  <div class="main-container">
    <a-tabs type="line" v-model="key" auto-switch @change="tabClick">
      <a-tab-pane title="管理登录日志" key="1">
        <TableBody>
          <template #header>
            <TableHeader ref="tableHeaderRef" :show-filter="false">
              <template #search-content>
                <a-form ref="seachForm" :model="form">
                  <a-row :gutter="24">
                    <a-col :span="4">
                      <a-form-item field="ip" hide-label>
                        <a-input
                          v-model="form.ip"
                          class="width100"
                          placeholder="请输入登录ip"
                          allow-clear
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="4">
                      <a-form-item field="adminId" hide-label>
                        <a-select
                          class="width100"
                          v-model="form.adminId"
                          placeholder="请选择管理员"
                          allow-clear
                          allow-search
                        >
                          <a-option v-for="item in admin" :key="item.id" :value="item.id">{{
                            item.userName
                          }}</a-option>
                        </a-select>
                      </a-form-item>
                    </a-col>

                    <a-col :span="4">
                      <a-form-item field="success" hide-label>
                        <a-select
                          class="width100"
                          v-model="form.success"
                          placeholder="请选择登录状态"
                          allow-clear
                        >
                          <a-option :value="1">成功</a-option>
                          <a-option :value="0">失败</a-option>
                        </a-select>
                      </a-form-item>
                    </a-col>
                    <a-col :span="4">
                      <a-form-item field="addTime" hide-label>
                        <a-date-picker
                          class="width100"
                          v-model="form.addTime"
                          show-time
                          :disabledDate="changeTraceEnd"
                          placeholder="请选择开始登录时间"
                          :time-picker-props="{ defaultValue: '12:00:00' }"
                          format="YYYY-MM-DD HH:mm:ss"
                          :shortcuts="[
                            {
                              label: '今日',
                              value: () => (
                                (form.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                )),
                                (form.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                ))
                              ),
                            },
                            {
                              label: '昨日',
                              value: () => (
                                (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (form.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '七日',
                              value: () => (
                                (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                                  .subtract(7, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (form.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '本月',
                              value: () => (
                                (form.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                )),
                                (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '上月',
                              value: () => (
                                (form.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                                  .subtract(1, 'month')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (form.endTime = $dayjs()
                                  .subtract(1, 'month')
                                  .endOf('month')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                          ]"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="4">
                      <a-form-item field="endTime" hide-label>
                        <a-date-picker
                          class="width100"
                          v-model="form.endTime"
                          show-time
                          :disabledDate="changeTraceStart"
                          placeholder="请选择结束登录时间"
                          :time-picker-props="{ defaultValue: '12:00:00' }"
                          :shortcuts="[
                            {
                              label: '今日',
                              value: () => (
                                (form.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                )),
                                (form.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                ))
                              ),
                            },
                            {
                              label: '昨日',
                              value: () => (
                                (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (form.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '七日',
                              value: () => (
                                (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                                  .subtract(7, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (form.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '本月',
                              value: () => (
                                (form.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                )),
                                (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '上月',
                              value: () => (
                                (form.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                                  .subtract(1, 'month')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (form.endTime = $dayjs()
                                  .subtract(1, 'month')
                                  .endOf('month')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                          ]"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="4">
                      <a-form-item field="btns" hide-label>
                        <a-space :size="15">
                          <a-button
                            type="primary"
                            v-permission="logLogin"
                            html-type="submit"
                            @click="doRefresh(1)"
                            ><template #icon> <icon-search /> </template>搜索</a-button
                          >
                          <a-button v-permission="logLogin" @click="resetSeach"
                            ><template #icon>
                              <icon-sync theme="outline" size="14" />
                            </template>
                            <!-- Use the default slot to avoid extra spaces -->
                            <template #default>重置</template></a-button
                          >
                        </a-space>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </a-form>
              </template>
            </TableHeader>
          </template>
          <template #table-config>
            <a-space :size="15">
              <a-button
                type="outline"
                @click="exportLogins"
                v-permission="exportLogin"
                :loading="loading"
              >
                <!-- Use the default slot to avoid extra spaces -->
                <template #default>导出</template>
              </a-button>
            </a-space>
            <a-space :size="15">
              <TableConfig
                @update-border="onUpdateBorder"
                @update-striped="onUpdateStriped"
                @refresh="doRefresh"
              />
            </a-space>
          </template>
          <template #default>
            <a-table
              :bordered="{ wrapper: true, cell: tables.bordered }"
              :stripe="(tables.striped as boolean)"
              :loading="tables.tableLoading"
              :data="table.dataList"
              :pagination="false"
              :column-resizable="true"
              :rowKey="rowKey"
              :columns="tableColumns.list"
              table-layout-fixed
              hide-expand-button-on-empty
              :default-expand-all-rows="true"
              :scroll="scroll"
            >
              <template #columns>
                <a-table-column
                  v-for="item of tableColumns.list"
                  :key="item.key"
                  align="left"
                  :title="(item.title as string)"
                  :width="item.width"
                  :data-index="(item.key as string)"
                  :fixed="item.fixed"
                  :ellipsis="true"
                  :tooltip="true"
                >
                  <template v-if="item.key === 'state'" #cell="{ record }">
                    <a-space>
                      <a-button
                        v-if="record.error"
                        type="text"
                        status="danger"
                        @click="handleClickInfo(record.error)"
                        >失败</a-button
                      >
                      <a-button v-else type="text">成功</a-button>
                    </a-space>
                  </template>
                </a-table-column>
              </template>
            </a-table>
          </template>
          <template #footer>
            <TableFooter ref="tableFooterRef" :pagination="pagination" />
          </template>
        </TableBody>
      </a-tab-pane>
      <a-tab-pane title="客户登录日志" key="2">
        <TableBody>
          <template #header>
            <TableHeader ref="tableHeaderRef" :show-filter="false">
              <template #search-content>
                <a-form ref="seachUserForm" :model="userForm">
                  <a-row :gutter="24">
                    <a-col :span="4">
                      <a-form-item field="ip" hide-label>
                        <a-input
                          v-model="userForm.ip"
                          class="width100"
                          placeholder="请输入登录ip"
                          allow-clear
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="4">
                      <a-form-item field="userId" hide-label>
                        <a-select
                          class="width100"
                          v-model="userForm.userId"
                          placeholder="请选择客户"
                          allow-clear
                          allow-search
                          :options="user"
                          :virtual-list-props="{ height: 200 }"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="4">
                      <a-form-item field="success" hide-label>
                        <a-select
                          class="width100"
                          v-model="userForm.success"
                          placeholder="请选择登录状态"
                          allow-clear
                        >
                          <a-option :value="1">成功</a-option>
                          <a-option :value="0">失败</a-option>
                        </a-select>
                      </a-form-item>
                    </a-col>
                    <a-col :span="4">
                      <a-form-item field="addTime" hide-label>
                        <a-date-picker
                          class="width100"
                          v-model="userForm.addTime"
                          show-time
                          :disabledDate="changeTraceEndUser"
                          placeholder="请选择登录开始时间"
                          :time-picker-props="{ defaultValue: '12:00:00' }"
                          format="YYYY-MM-DD HH:mm:ss"
                          :shortcuts="[
                            {
                              label: '今日',
                              value: () => (
                                (userForm.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                )),
                                (userForm.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                ))
                              ),
                            },
                            {
                              label: '昨日',
                              value: () => (
                                (userForm.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (userForm.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '七日',
                              value: () => (
                                (userForm.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                                  .subtract(7, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (userForm.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '本月',
                              value: () => (
                                (userForm.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                )),
                                (userForm.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '上月',
                              value: () => (
                                (userForm.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                                  .subtract(1, 'month')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (userForm.endTime = $dayjs()
                                  .subtract(1, 'month')
                                  .endOf('month')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                          ]"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="4">
                      <a-form-item field="endTime" hide-label>
                        <a-date-picker
                          class="width100"
                          v-model="userForm.endTime"
                          show-time
                          :disabledDate="changeTraceStartUser"
                          placeholder="请选择登录结束时间"
                          :time-picker-props="{ defaultValue: '12:00:00' }"
                          :shortcuts="[
                            {
                              label: '今日',
                              value: () => (
                                (userForm.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                )),
                                (userForm.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                ))
                              ),
                            },
                            {
                              label: '昨日',
                              value: () => (
                                (userForm.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (userForm.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '七日',
                              value: () => (
                                (userForm.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                                  .subtract(7, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (userForm.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '本月',
                              value: () => (
                                (userForm.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                )),
                                (userForm.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '上月',
                              value: () => (
                                (userForm.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                                  .subtract(1, 'month')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (userForm.endTime = $dayjs()
                                  .subtract(1, 'month')
                                  .endOf('month')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                          ]"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="4">
                      <a-form-item field="btns" hide-label>
                        <a-space :size="15">
                          <a-button
                            v-permission="loginUser"
                            type="primary"
                            html-type="submit"
                            @click="doRefreshUser(1)"
                            ><template #icon> <icon-search /> </template>搜索</a-button
                          >
                          <a-button v-permission="loginUser" @click="resetSeachUser"
                            ><template #icon>
                              <icon-sync theme="outline" size="14" />
                            </template>
                            <!-- Use the default slot to avoid extra spaces -->
                            <template #default>重置</template></a-button
                          >
                        </a-space>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </a-form>
              </template>
            </TableHeader>
          </template>
          <template #table-config>
            <a-space :size="15">
              <a-button
                type="outline"
                v-permission="exportLoginUser"
                @click="exportLoginsUser"
                :loading="loading"
              >
                <!-- Use the default slot to avoid extra spaces -->
                <template #default>导出</template>
              </a-button>
            </a-space>
            <a-space :size="15">
              <TableConfig
                @update-border="onUpdateBorder"
                @update-striped="onUpdateStriped"
                @refresh="doRefreshUser(1)"
              />
            </a-space>
          </template>
          <template #default>
            <a-table
              :bordered="{ wrapper: true, cell: tables.bordered }"
              :stripe="(tables.striped as boolean)"
              :loading="tables.tableLoading"
              :data="table.dataList"
              :pagination="false"
              :column-resizable="true"
              :rowKey="rowKey"
              :columns="tableColumns.userList"
              table-layout-fixed
              hide-expand-button-on-empty
              :default-expand-all-rows="true"
              :scroll="scroll"
            >
              <template #columns>
                <a-table-column
                  v-for="item of tableColumns.userList"
                  :key="item.key"
                  align="left"
                  :title="(item.title as string)"
                  :width="item.width"
                  :data-index="(item.key as string)"
                  :fixed="item.fixed"
                  :ellipsis="true"
                  :tooltip="true"
                >
                  <template v-if="item.key === 'state'" #cell="{ record }">
                    <a-space>
                      <a-button
                        v-if="record.error"
                        type="text"
                        status="danger"
                        @click="handleClickInfo(record.error)"
                        >失败</a-button
                      >
                      <a-button v-else type="text">成功</a-button>
                    </a-space>
                  </template>
                </a-table-column>
              </template>
            </a-table>
          </template>
          <template #footer>
            <TableFooter ref="tableFooterRef" :pagination="paginations" />
          </template>
        </TableBody>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script lang="ts" setup>
  import { logLogin, exportLogin } from '@/api/url'

  import { loginUser, exportLoginUser } from '@/api/userUrl'

  import useCommonStore from '@/store/modules/common'

  import { get } from '@/api/http'
  import { usePagination, useRowKey, useTable } from '@/hooks/table'
  import { onMounted, reactive, ref } from 'vue'

  import _ from 'lodash-es'
  import { Modal } from '@arco-design/web-vue'

  const table = useTable()
  const scroll = { x: 1500 }
  const pagination = usePagination(doRefresh)
  const paginations = usePagination(doRefreshUser)

  const seachForm = ref()

  const seachUserForm = ref()

  const loading = ref(false)

  const key = ref('1')

  const admin: any = ref([])

  const user: any = ref([])

  const useCommon = useCommonStore()

  const form = reactive({
    adminId: '', //管理员id
    ip: '', //登录ip
    success: '', // 登陆状态
    addTime: '',
    endTime: '',
  })

  const userForm = reactive({
    userId: '', //客户id
    ip: '', //登录ip
    success: '', // 登陆状态
    addTime: '',
    endTime: '',
  })

  const tables = reactive({
    tableLoading: false,
    bordered: false,
    striped: false,
    expand: [1],
    isExpand: false,
  })

  const tableColumns: any = reactive({
    list: [
      {
        title: '公司账号',
        key: 'userName',
        dataIndex: 'userName',
        align: 'center',
        checked: true,
        width: 100,
      },
      {
        title: '登录状态',
        key: 'state',
        dataIndex: 'state',
        align: 'center',
        checked: true,
        width: 100,
      },
      {
        title: '登录ip',
        key: 'ip',
        dataIndex: 'ip',
        align: 'center',
        checked: true,
        width: 100,
      },

      {
        title: '登录地址',
        key: 'address',
        dataIndex: 'address',
        align: 'center',
        checked: true,
        width: 100,
      },
      {
        title: '登录设备',
        key: 'operatingSystem',
        dataIndex: 'operatingSystem',
        align: 'center',
        checked: true,
        width: 100,
      },
      {
        title: '浏览器',
        key: 'browser',
        dataIndex: 'browser',
        align: 'center',
        checked: true,
        width: 100,
      },
      {
        title: '登录时间',
        key: 'time',
        dataIndex: 'time',
        align: 'center',
        checked: true,
        width: 190,
      },
    ],
    userList: [
      {
        title: '客户账号',
        key: 'userName',
        dataIndex: 'userName',
        align: 'center',
        checked: true,
        width: 130,
      },
      {
        title: '登录状态',
        key: 'state',
        dataIndex: 'state',
        align: 'center',
        checked: true,
        width: 100,
      },
      {
        title: '登录ip',
        key: 'ip',
        dataIndex: 'ip',
        align: 'center',
        checked: true,
        width: 100,
      },

      {
        title: '登录地址',
        key: 'address',
        dataIndex: 'address',
        align: 'center',
        checked: true,
        width: 100,
      },
      {
        title: '登录设备',
        key: 'operatingSystem',
        dataIndex: 'operatingSystem',
        align: 'center',
        checked: true,
        width: 100,
      },
      {
        title: '浏览器',
        key: 'browser',
        dataIndex: 'browser',
        align: 'center',
        checked: true,
        width: 100,
      },
      {
        title: '登录时间',
        key: 'time',
        dataIndex: 'time',
        align: 'center',
        checked: true,
        width: 190,
      },
    ],
  })

  const rowKey = useRowKey('id')

  const tabClick = (val: string | number) => {
    if (val == '2') {
      userLists()
      doRefreshUser(1)
    } else {
      doRefresh(1)
    }
  }

  const resetSeach = () => {
    seachForm.value.resetFields()
    doRefresh(1)
  }

  const handleClickInfo = (val: any) => {
    Modal.error({
      title: '错误报文',
      content: val,
    })
  }

  const exportLogins = () => {
    loading.value = true
    useCommon
      .downLoads(exportLogin, form, '管理登录日志列表')
      .then(() => {
        loading.value = false
      })
      .catch(() => {
        loading.value = false
      })
  }

  const exportLoginsUser = () => {
    loading.value = true
    useCommon
      .downLoads(exportLoginUser, form, '客户登录日志列表')
      .then(() => {
        loading.value = false
      })
      .catch(() => {
        loading.value = false
      })
  }

  //管理登录日志列表
  function doRefresh(value?: number) {
    tables.tableLoading = true
    if (value) {
      pagination.page = value
    }
    get({
      url: logLogin,
      data: {
        ...form,
        page: pagination.page,
        size: pagination.pageSize,
      },
    }).then((res) => {
      tables.tableLoading = false
      table.handleSuccess(res.data.list)
      pagination.setTotalSize((res.data as any).totalSize)
      return res.data.list
    })
  }
  //获取管理列表
  const adminLists = () => {
    useCommon.adminLists().then((res) => {
      admin.value = res.data
    })
  }

  //获取客户列表
  const userLists = () => {
    useCommon.userLists().then((res) => {
      user.value = res.data
    })
  }

  //客户登录日志列表
  function doRefreshUser(value?: number) {
    tables.tableLoading = true
    if (value) {
      paginations.page = value
    }
    get({
      url: loginUser,
      data: {
        ...userForm,
        page: paginations.page,
        size: paginations.pageSize,
      },
    }).then((res) => {
      tables.tableLoading = false
      table.handleSuccess(res.data.list)
      paginations.setTotalSize((res.data as any).totalSize)
      return res.data.list
    })
  }
  //客户重置
  const resetSeachUser = () => {
    seachUserForm.value.resetFields()
    doRefreshUser()
  }

  function onUpdateBorder(isBordered: boolean) {
    tables.bordered = isBordered
  }

  function onUpdateStriped(isStriped: boolean) {
    tables.striped = isStriped
  }

  //跟踪API开始时间限制结束时间
  function changeTraceEnd(time: any) {
    return time.getTime() > new Date(form.endTime).getTime() //大于结束时间的不选
  }
  //跟踪API结束时间限制开始时间
  function changeTraceStart(time: any) {
    return time.getTime() < new Date(form.addTime).getTime() //小于开始时间的不选
  }

  //客户
  //跟踪API开始时间限制结束时间
  function changeTraceEndUser(time: any) {
    return time.getTime() > new Date(userForm.endTime).getTime() //大于结束时间的不选
  }
  //跟踪API结束时间限制开始时间
  function changeTraceStartUser(time: any) {
    return time.getTime() < new Date(userForm.addTime).getTime() //小于开始时间的不选
  }

  onMounted(async () => {
    await doRefresh()
    await adminLists()
  })
</script>

<style lang="less" scoped>
  :deep(.arco-table-cell-expand-icon) {
    justify-content: center;
  }

  :deep(.arco-tabs-nav-tab) {
    background-color: var(--color-bg-1);
    padding: 20px 0;
    border-radius: 10px;
  }

  :deep(.arco-tabs-content::before) {
    height: 0px !important;
  }

  :deep(.arco-tabs-tab) {
    margin: 0 20px;
    padding: 0;
    padding-bottom: 5px;
  }

  :deep(.arco-tabs-nav::before) {
    position: static !important;
    height: 0px !important;
  }

  :deep(.arco-tabs-content) {
    padding-top: 20px;
  }

  .box {
    overflow: hidden; //超出的文本隐藏
    text-overflow: ellipsis; //用省略号显示
    white-space: nowrap;
  }

  .tabs {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 40px;
    margin-bottom: 20px;

    .button {
      box-sizing: border-box;
      padding-bottom: 5px;
    }
  }

  .action {
    color: #009dff;
    border-bottom: 3px solid #009dff;
  }

  .butten {
    padding: 0px 4px;
  }
</style>
